<template>
  <div class="article-actions">
    <button 
      @click="toggleLike"
      :class="{ 'text-primary': isLiked }"
      class="btn btn-sm btn-outline-secondary me-2"
    >
      <i class="bi bi-hand-thumbs-up"></i> {{ likeCount }}
    </button>
    
    <button 
      @click="showComments"
      class="btn btn-sm btn-outline-secondary me-2"
    >
      <i class="bi bi-chat"></i> {{ commentCount }}
    </button>
    
    <button 
      @click="toggleCollect"
      :class="{ 'text-danger': isCollected }"
      class="btn btn-sm btn-outline-secondary"
    >
      <i class="bi bi-bookmark"></i> {{ collectCount }}
    </button>
  </div>
</template>

<script>
export default {
  props: {
    initialLikes: { type: Number, default: 0 },
    initialComments: { type: Number, default: 0 },
    initialCollects: { type: Number, default: 0 },
    initialIsLiked: { type: Boolean, default: false },
    initialIsCollected: { type: Boolean, default: false }
  },
  data() {
    return {
      isLiked: this.initialIsLiked,
      likeCount: this.initialLikes,
      commentCount: this.initialComments,
      isCollected: this.initialIsCollected,
      collectCount: this.initialCollects
    }
  },
  methods: {
    toggleLike() {
      this.isLiked = !this.isLiked
      this.likeCount += this.isLiked ? 1 : -1
      // 这里可以添加API调用
      // this.$axios.post('/api/like', { articleId: this.articleId })
    },
    toggleCollect() {
      this.isCollected = !this.isCollected
      this.collectCount += this.isCollected ? 1 : -1
      // 这里可以添加API调用
      // this.$axios.post('/api/collect', { articleId: this.articleId })
    },
    showComments() {
      // 触发显示评论区域
      this.$emit('show-comments')
    }
  }
}
</script>

<style>
.article-actions {
  display: flex;
  align-items: center;
  margin-top: 1rem;
}
</style>